#{extends 'site.html' /}
#{set title:exam.examKey /}
 
<h4>Begin the exam</h4>

<div style="width: 100px; float: right;">
	<span id="defaultCountdown" class="countdown"></span>
</div>

<br style="clear: both;"/>

<script type="text/javascript">
	var newYear = new Date(); 
	newYear = new Date(${exam.endingDate.get(java.util.Calendar.YEAR)}, ${exam.endingDate.get(java.util.Calendar.MONTH)}, ${exam.endingDate.get(java.util.Calendar.DAY_OF_MONTH)}, ${exam.endingDate.get(java.util.Calendar.HOUR_OF_DAY)}, ${exam.endingDate.get(java.util.Calendar.MINUTE)}, ${exam.endingDate.get(java.util.Calendar.SECOND)}); 
	$('#defaultCountdown').countdown({until: newYear, format: 'MS', onExpiry: liftOff}); 
	 
	function liftOff() { 
		$('#submitQuestion').submit();
	}
</script>

<h4>Question : ${question.title} (${question.questionType})</h4>

<p>${question.content}</p>

#{form @Contests.nextQuestion(exam.examKey), id:'submitQuestion'}
<p>
   #{if question.questionType.toString() == 'SIMPLE_CHOICE'}
      <!-- Use foreach question.responses -->
      #{list items:question.responses, as:'response'}
         <input type="radio" name="simpleResponse" value="${response_index}" checked="checked" />${response.value}
         <br/>
      #{/list}
   #{/if}
   
   #{elseif question.questionType.toString() == 'MULTIPLE_CHOICE'}
      <!-- Use foreach question.responses -->
      #{list items:question.responses, as:'response'}
         <input type="checkbox" name="response${response_index}" />${response.value}
         <br/>
      #{/list}
   #{/elseif}
   
   #{elseif question.questionType.toString() == 'TEXT_ANSWER'}
      Response <input type="text" name="textResponse" />
   #{/elseif}
</p>

<p>
   <input type="submit" value="Next Question" />
</p>   
   
#{/form}
 

